<template>
	<view class="wodepingjia">
		<view class="list">
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="top">
					<view class="top-left">
						<image v-if="item.star==1" src="../../static/pj_hp_1@2x.png" mode=""></image>
						<image v-if="item.star==2" src="../../static/pj_zp_1@2x.png" mode=""></image>
						<image v-if="item.star==3" src="../../static/pj_cp_1@2x.png" mode=""></image>
					    <text>{{item.star===1?'好评' :item.star===2?'中评' :'差评'}}</text>
					</view>
					<view class="top-right">
						<text class="top-right-text">{{item.time}}</text>
						<text class="top-right-text1" @click="handleshow(index,item.commentId)">删除评论</text>
					</view>
				</view>
				<view class="content">
					{{item.content}}
				</view>
				<view class="image" v-if="item.img.length > 0">
					<image v-for="(tab,index1) in item.img" :key="index1" :src="tab" mode="aspectFill" @click="previewImage(item.img,item.img[index1])"></image>
				</view>
				<view class="shangpin" @click="handleshangpinxiangqing(item.goodsId)">
					<image :src="item.goodsImg" mode="aspectFill"></image>
					<view class="shangpin-box">
						<text class="shangpin-box-text">{{item.goodsName}}</text>
						<text class="shangpin-box-text1"></text>
					</view>
				</view>
			</view>
		</view>
		<view class="empty" v-if="showEmpty">
			<text>暂无评价</text>
		</view>
		<view class="loadmore" v-if="isLoadmore">
			<u-loadmore :status="status" :icon-type="flower"/>
		</view>
		<u-mask :show="show" @click="show = false">
			<view class="warp">
				<view class="rect" @tap.stop>
					<view class="tishi">
						提示
					</view>
					<view class="rect-content">
						确定删除吗？
					</view>
					<view class="xian-box">
						<view class="xian">
							
						</view>
					</view>
					<view class="rect-btn">
						<view class="quxiao"  @click="show = false">
							取消
						</view>
						<view class="queding"  @click="sumbit">
							确定
						</view>
					</view>
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				page:1,
				size:10,
				pageTotal:'',
				list:[],
				showEmpty:false,
				listIndex:'',
				id:'',
				status: 'loading',
				isLoadmore:true,
				share:uni.getStorageSync('share')
			}
		},
		onLoad() {
			this.getmyCommentsList()
		},
		methods: {
			//我的评价
			async getmyCommentsList(){
				const params = {
					page:this.page,
					size:this.size,
					status:this.categoryListIndex
				}
				const res = await this.$u.api.myCommentsList(params)
				if (res.total < 10) {
					this.isLoadmore = false
				}
				this.status = 'nomore'
				this.list = [...this.list,...res.rows]
				this.pageTotal = Math.ceil(res.total/this.size)
				if (res.total > 0) {
					this.showEmpty = false
				}else{
					this.showEmpty = true
				}
				uni.stopPullDownRefresh()
			},
			//打开删除弹框
			handleshow(index,id){
				this.show = true
				this.listIndex = index
				this.id = id
			},
			//确定
			async sumbit(){
				this.show = false
				const params = {
					commentId:this.id
				}
				const res = await this.$u.api.delComments(params)
				this.$u.toast(res.msg)
				this.list.splice(this.listIndex,1)
				if (this.list.length == 0) {
					this.showEmpty = true
				}
			},
			//预览轮播图
			previewImage(list,url){
				uni.previewImage({
				    urls: list,
				    current: url
				});
			},
			//商品详情
			handleshangpinxiangqing(goodsId){
				const params = 'goodsId=' + goodsId
				uni.navigateTo({
					url:'/pages/shangpinxiangqing/shangpinxiangqing?' + params
				})
			}
		},
		//下拉刷新
		onPullDownRefresh(){
			this.page = 1
			this.list = []
			this.getUserCouponsList()
		},
		//向上加载
		onReachBottom() {
			this.page = this.page + 1
			if (this.page <= this.pageTotal) {
				this.isLoadmore = true
				this.status = 'loading';
				setTimeout(()=>{
					this.getUserCouponsList()
				},600)
			} else{
				//this.$u.toast('没有更多数据了')
			}
		},
	}
</script>
<style>
	page{
		background: #FBFBFB;
	}
</style>
<style scoped lang="scss">
    .list{
		padding-bottom: 25rpx;
		padding-top: 28rpx;
	}
	.item{
		padding: 28rpx;
		background: white;
		margin-bottom: 28rpx;
	}
	.top{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.top-left{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.top-left image{
		width: 44rpx;
		height: 44rpx;
	}
	.top-left text{
		margin-left: 20rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 32rpx;
	}
	.top-right{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.top-right-text{
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 28rpx;
	}
	.top-right-text1{
		margin-left: 28rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 28rpx;
	}
	.content{
		padding: 16rpx 0rpx 28rpx 0rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 32rpx;
	}
	.image{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.image image{
		margin: 0rpx 20rpx 24rpx 0rpx;
		width: 122rpx;
		height: 122rpx;
		border-radius: 5px;
	}
	.shangpin{
		padding: 16rpx;
		background: #F4F4F4;
		display: flex;
		flex-direction: row;
	}
	.shangpin image{
		width: 116rpx;
		height: 116rpx;
	}
	.shangpin-box{
		margin-left: 16rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		
	}
	.shangpin-box-text{
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 28rpx;
	}
	.shangpin-box-text1{
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 28rpx;
	}
	
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
	
	.rect {
		width: 80%;
		// background: #081945;
		// box-shadow: inset 0px 0px 25px 0px #045174;
		background: white;
		border-radius: 10px 10px 10px 10px;
		border-radius: 10px;
	}
	.tishi{
		padding: 30rpx 0rpx 20rpx 0rpx;
		text-align: center;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
		line-height: 42rpx;
	}
	.rect-content{
		padding: 30rpx 0rpx 40rpx 0rpx;
		text-align: center;
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #000000;
		line-height: 42rpx;
		border-bottom: 0.5px solid rgba(0,0,0,0.05);
	}
	.xian-box{
		padding: 0rpx 30rpx;
	}
	.xian{
		width: 100%;
		height: 0px;
		opacity: 0.2;
		border: 0.5rpx solid #FFFFFF;
	}
	.rect-btn{
		display: flex;
		flex-direction: row;
		padding: 40rpx 0rpx 40rpx 0rpx;
	}
	.quxiao{
		flex: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #666666;
		line-height: 42rpx;
	}
	.queding{
		flex: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 42rpx;
	}
	
	.empty{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 350rpx;
	}
	.empty image{
		width: 238rpx;
		height: 76rpx;
	}
	.empty text{
		margin-top: 30rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 44rpx;
	}
	.loadmore{
		padding-bottom: 20rpx;
	}
</style>
